<template>
	<div id="help">
		<div class="help_wrap">
			<el-row class="help_title">
				<el-col class="active" :span="6">
					<router-link :class="{'active':id=='regist' }" :to="{ path: '/info/help', query: { id: 'regist' }}">如何注册</router-link>
				</el-col>
				<el-col :span="6">
					<router-link :class="{'active':id=='problem'}" :to="{ path: '/info/help', query: { id: 'problem' }}">常见问题</router-link>
				</el-col>
				<el-col :span="6">
					<router-link :class="{'active':id=='settled'}" :to="{ path: '/info/help', query: { id: 'settled' }}">资产入驻</router-link>
				</el-col>
				<el-col :span="6">
					<router-link :class="{'active':id=='contact'}" :to="{ path: '/info/help', query: { id: 'contact' }}">联系我们</router-link>
				</el-col>
			</el-row>
			<div class="contant">
				<template v-if=" id=='problem' ">
					<helpProblem></helpProblem>
				</template>
				<template v-if=" id=='settled' ">
					<helpSettled></helpSettled>
				</template>
				<template v-if=" id=='contact' ">
					<helpContact></helpContact>
				</template>
				<template v-else>
					<helpRegist></helpRegist>
				</template>
			</div>
		</div>
	</div>
</template>
<script>
	import * as contant from "./help/main";
	export default {
		name: "help",
		components: {
			helpRegist: contant.hRegist,
			helpProblem: contant.hProblem,
			helpSettled: contant.hSettled,
			helpContact: contant.hContact,
		},
		computed:{
           id() {
               return this.$route.query.id;
		   }
		},
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../public/css/variable.less';
	.help_wrap{
		background: @cw;
		height: 555px;
		overflow: hidden;
		.bdr(5px);
		.help_title{
			margin: 0 auto 40px;
			text-align: center;
			line-height: 40px;
			background:　#fafafa;
			.fonts(18px);
			padding: 0 300px;
			.el-col{
				cursor: pointer;
				.trans(0.3s);
				color: #80848c;
				a{
					display: block;
					
					&:hover,&.active{ background: @cgolden; color: @cw }
				}
				
			}
		}
		.contant{
			width: 710px;
			color: #94989b;
			line-height: 30px;
			padding-left: 37px;
			margin: 20px auto 35px;
			.el-row{
				margin: 35px auto;
				p{
					margin-bottom: 20px;
				}
			}
			.el-col:first-child{
				color: @cgolden;
			}
		}
	}
</style>
